<template>
  <div class="search-header">
    <el-form
      :inline="true"
      :model="formData"
      ref="formRef"
      class="form--label-left"
      label-width="180px"
    >
      <div class="clearfix">
        <div
          class="formData fl"
          v-for="(item, idx) in searchConfig.form"
          :key="idx"
        >
          <el-form-item
            label=""
            :prop="item.key"
            class="search-header-item"
            :rules="item.rules"
          >
            <!-- 输入框 -->
            <template v-if="item.type === 'input'">
              <div class="formInput clearfix">
                <div class="title fl">{{ item.label }}：</div>
                <div class="input fl">
                  <el-input
                    v-model="formData[item.key]"
                    :placeholder="item.placeholder"
                    :size="item.size || 'medium'"
                  />
                </div>
              </div>
            </template>
            <!-- 日期选择器 -->
            <template v-else-if="item.type === 'datePicker'">
              <div class="formTime clearfix">
                <div class="title fl">{{ item.label }}：</div>
                <div class="input fl">
                  <el-date-picker
                    :editable="false"
                    value-format="yyyy-MM-dd"
                    :type="item.config.type"
                    v-model="formData[item.key]"
                    :placeholder="item.config.placeholder"
                    :range-separator="item.config.rangeSeparator"
                    :start-placeholder="item.config.startPlaceholder"
                    :end-placeholder="item.config.endPlaceholder"
                    :size="item.size || 'medium'"
                  />
                </div>
              </div>
            </template>
            <template v-else-if="item.type === 'dateTimePicker'">
              <div class="formDateTime clearfix">
                <div class="title fl" v-if="item.label">{{ item.label }}：</div>
                <div class="input fl">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    prefix-icon="el-icon-date"
                    :type="item.config.type"
                    v-model="formData[item.key]"
                    :placeholder="item.config.placeholder"
                    :range-separator="item.config.rangeSeparator"
                    :start-placeholder="item.config.startPlaceholder"
                    :end-placeholder="item.config.endPlaceholder"
                    :size="item.size || 'medium'"
                  />
                </div>
              </div>
            </template>
            <!-- 选择框 -->
            <template v-else-if="item.type === 'checkBox'">
              <div class="formCheckBox clearfix">
                <el-checkbox v-model="formData[item.key]">
                  {{ item.label }}</el-checkbox
                >
              </div>
            </template>
           
          </el-form-item>
        </div>
        <!-- 按钮 -->
        <div class="btn-arr fl">
          <el-button type="primary" @click="emitSearch" size="medium">查询</el-button>
          <el-button @click="emitReset" v-if="false">重置</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  
  name: "searchPanel",
  props: {
    //查询配置项
    searchConfig: Object,
    default: {},
  },
  data() {
    return {
      formData: {}, // 表单参数
      creationOptions: [],
      isClient: false,
      packageType: null, //套餐状态联动
    };
  },
  created() {
    this.initFormData();
  },
  methods: {
    // 初始化数据
    initFormData() {
      let [...dataArr] = this.searchConfig.form || [];
      let obj = {};
      dataArr.forEach((item) => {
        obj[item.key] = item.value || '';
      });
      this.formData = Object.assign({}, obj);
    },
    // 查询
    emitSearch() {
      this.$emit("search", Object.assign({}, this.formData));
    },
    // 清空
    emitReset() {
      this.initFormData();
      this.$refs.formRef && this.$refs.formRef.resetFields();
      this.$emit("reset", Object.assign({}, this.formData));
    },
  },
};
</script>
<style lang="less" scoped>
.search-header {
 .btn-arr{
   margin-top: 3px;
 }
}
</style>
